<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
const login = ref(null)
const router = useRouter()
const userStore = useUserStore()
function open() {
  login.value.open()
}
function gotoURL(url) {
  if (url === '/') {
    router.push({ path: url })
  } else {
    if (userStore.token) {
      router.push({ path: url })
    } else {
      open()
    }
  }
}
</script>

<template>
  <div class="bottom-menu">
    <ul class="flex-between">
      <!-- prettier-ignore -->
      <li :class="{active:$route.path == '/'}" class="flex-center" @click="gotoURL('/')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-home"></use>
        </svg>发现
      </li>
      <!-- prettier-ignore -->
      <li :class="{active:$route.path == '/album'}" class="flex-center" @click="gotoURL('/album')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiangce"></use>
        </svg>相册
      </li>
      <!-- prettier-ignore -->
      <li :class="{active:$route.path == '/post'}" class="flex-center" @click="gotoURL('/post')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tianjia"></use>
        </svg>发布
      </li>
      <!-- prettier-ignore -->
      <li class="flex-center" @click="open()">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-person"></use>
        </svg>登录
      </li>
      <Login ref="login"></Login>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.bottom-menu {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
  background-color: var(--color-background);
  padding-bottom: env(safe-area-inset-bottom);

  li {
    flex: 1;
    font-size: 16px;
    color: var(--color-tertiary-label);
    height: 48px;
    cursor: pointer;

    .icon {
      margin-right: 12px;
    }

    &.active {
      color: var(--color-primary-label);
    }
  }
}

@media screen and (max-width: 959px) {
  .bottom-menu {
    display: block;
  }
}
</style>
